<template>
	<div class="coupon-list table-theme">
		<head-title title="营销--优惠券领取记录"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="statusList"
						:value="status"
						placeholder="请选择"
						type="status"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="couponList" border>
				<el-table-column label="序号" align="center" prop="coupon_list_id"></el-table-column>
				<el-table-column label="店铺id" align="center" prop="store_id"></el-table-column>
				<el-table-column label="店铺名称" align="center" prop="store_name"></el-table-column>
				<el-table-column label="优惠券名称" align="center" prop="coupon_name"></el-table-column>
				<el-table-column label="满减金额" align="center" prop="satisfy_money"></el-table-column>
				<el-table-column label="优惠券金额" align="center" prop="money"></el-table-column>
				<el-table-column label="获取途径" align="center" prop="style_name"></el-table-column>
				<el-table-column label="头像" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.heard_img"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="优惠券类型" align="center" prop="typeName"></el-table-column>
				<el-table-column label="折扣" align="center" prop="discount"></el-table-column>
				<el-table-column label="B端/C端" align="center" prop="useTypeName"></el-table-column>
				<el-table-column label="状态" align="center" prop="statusName"></el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="到期时间" align="center" prop="end_time"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="writeOff(scope.row.coupon_list_id)">核销</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.coupon_list_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	export default {
		components: {
			ImgPopover,
			SelectView
		},
		data() {
			return {
				couponList: [],
				total: 0,
				totalData: 0,
				status: '',
				client: '',
				statusList: [{
						value: 1,
						label: '未使用'
					},
					{
						value: 2,
						label: '已使用'
					},
					{
						value:3,
						label:"已过期"
					}
				],
				page: 0,
				searchOption:[{
					value:0,
					label:'序号'
				},{
					value:1,
					label:'用户ID'
				},{
					value:2,
					label:'店铺ID'
				}],
				selectContent:'',
				classSelect:0
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					status: this.status,
					order_by:'coupon_list_id',
					asc:2
				};
				// classSelect 1序号  2用户id
				if (this.classSelect == 0 && this.selectContent != '') {
					data.coupon_list_id = this.selectContent;
				} else if (this.classSelect == 1 && this.selectContent != '') {
					data.user_id = this.selectContent;
				}else if(this.classSelect == 2 && this.selectContent != ''){
					data.store_id = this.selectContent;
				}

				this.$http(this.$ApiList.CouponList, data).then(res => {
					this.couponList = res.datas.data;
					this.total = res.datas.count;
				});
			},
			// 上下架
			upDown(e, coupon_id) {
				let data = {
					status: e,
					poster_id: coupon_id
				};
				//console.log(data)
				this.$http(this.$ApiList.CardDown, data).then(res => {
					this.$layer.msg('操作成功');
				});
			},
			// 删除
			del(coupon_list_id) {
				this.$confirm('确定删除吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							coupon_list_id: coupon_list_id
						};
						this.$http(this.$ApiList.CouponDel, data).then(res => {
							this.$layer.msg('删除成功');
							this.page = 1;
							this.init();
						});
					})
					.catch(() => {});
			},
			// 核销
			writeOff(coupon_list_id) {
				this.$confirm('确定核销吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							coupon_list_id: coupon_list_id
						};
						this.$http(this.$ApiList.CouponDestroy, data).then(res => {
							this.$layer.msg('核销成功');
							this.page = 1;
							this.init();
						});
					})
					.catch(() => {});
			},
			clientScreen() {
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.status = 1;
				this.classSelect = 0;
				this.selectContent = '';
				this.init();
			},
			// 搜素
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'status':
						this.status = value
						break;
				
					default:
						break;
				}
				this.init()
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.coupon-list {
		
	}
</style>
